<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Use correct character set. -->
		<meta charset="utf-8">
		<!-- Tell IE to use the latest, best version. -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>test-Hello World!</title>
		<script src="Build/Cesium/Cesium.js"></script>
		<script src="jQuery/jquery-3.1.1.js"></script>
		<!-- <script src= "https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> -->
		<style>
			@import url(Build/Cesium/Widgets/widgets.css);

			html,
			body,
			#cesiumContainer {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div style="position: absolute;z-index:1;">
			<button id="test-3" style="border:1px solid red;width: 100px;height:40px;">视角复位</button>
		</div>
		<div id="latlng_show" style="width:340px;height:30px;position:absolute;bottom:40px;right:200px;z-index:1;font-size:15px;">
  <div style="width:100px;height:30px;float:left;">
       <font size="3" color="white">经度：<span id="longitude_show"></span></font>
  </div>
  <div style="width:100px;height:30px;float:left;">
       <font size="3" color="white">纬度：<span id="latitude_show"></span></font>
  </div>
  <div style="width:140px;height:30px;float:left;">
       <font size="3" color="white">视角高：<span id="altitude_show"></span>km</font>
  </div>
</div>

		<!-- 控件容器 -->
		<div id="credit"></div>
		<!-- 地图容器 -->
		<div id="cesiumContainer"></div>
		<script>
			var viewer = new Cesium.Viewer('cesiumContainer', {
				geocoder: false, //搜索控件,搜索后镜头移动到搜索位置
				homeButton: false, //视角返回初始位置
				sceneModePicker:true, //地图模式控件(3d、2.5d、2d)
				baseLayerPicker: true, //地图图层选择
				navigationHelpButton: true, //操作帮助
				animation: true, //动画控件,控制视图动画播放速度
				creditContainer: "credit", //控件容器
				timeline: true, //时间线,指示当前时间,允许用户跳到特定的时间
				fullscreenButton: true, //全屏按钮
				//  vrButton:true,//vr按钮
			});

			 viewer.imageryLayers.removeAll();    //清除默认地图图层
    var GoogleMap = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
    	url:"http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"    //谷歌影像  	
        		}));
    viewer.imageryLayers.add(GoogleMap);   
    
    
    viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
    viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({   //调用影响中文注记服务
	    url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",
	    layer: "tdtAnnoLayer",
	    style: "default",
	    format: "image/jpeg",
	    tileMatrixSetID: "GoogleMapsCompatible",
	    show: false
	}));		
	
			viewer.scene.debugShowFramesPerSecond = true; //显示帧速(fps)
$("#test-3").click(function(){
	var point = Cesium.Cartesian3.fromDegrees(114.0743, 33.6198,350.0);//114.0752, 33.6233,600.0
	viewer.camera.setView({
	    destination : point,
	    orientation: {
	        heading : Cesium.Math.toRadians(0.0), ////围绕负z轴的旋转
	        pitch : Cesium.Math.toRadians(-40), //围绕负y轴的旋转
	        roll : 0.0 ///围绕正x轴的旋转
	    }
	});
})
     //自己给相机设置位置   114.0730, 33.6242,600.0  -90
var point = Cesium.Cartesian3.fromDegrees(114.0743, 33.6198,350.0);
viewer.camera.setView({
    destination : point,
    orientation: {
        heading : Cesium.Math.toRadians(0.0), ////围绕负z轴的旋转
        pitch : Cesium.Math.toRadians(-40), //围绕负y轴的旋转 -40为倾斜角度-90为从上往下正角度
        roll : 0.0 ///围绕正x轴的旋转
    }
});

			/*定义初始缩放，值可以改动，以下括号里的值可以看情况自己设置。*/
//viewer.camera.zoomIn(0);
/*放大*/
//viewer.camera.zoomIn(1000);
/*缩小*/  
//viewer.camera.zoomOut(1000);
/*左旋转*/    
//viewer.camera.rotateLeft(Cesium.Math.toDegrees(0.005).toFixed(2));
/*viewer.camera.rotateLeft(0.000001);*/
/*右旋转*/       
//viewer.camera.rotateRight(Cesium.Math.toDegrees(0.005).toFixed(2));
/*viewer.camera.rotateRight(0.000001);*/
/*上倾斜，偏左旋转*/ 
//viewer.camera.twistRight(Cesium.Math.toDegrees(0.005).toFixed(2));
/*下倾斜，偏右旋转*/ 
//viewer.camera.twistLeft(Cesium.Math.toDegrees(0.005).toFixed(2)); 



    //   添加标记有  点，广告牌和标签（Points, Billboards, and Labels）
var citizensBankPark = viewer.entities.add({
  position : Cesium.Cartesian3.fromDegrees(114.07573, 33.62309,0.0),
	name:'壹号码头',
  //广告牌
  billboard : {
      image : 'images/cluster1.png',
      width : 24,
      height : 24
  },
  label : {
    text : '一号码头',
    font : '14pt monospace',
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    outlineWidth : 2,
    verticalOrigin : Cesium.VerticalOrigin.TOP,//文字垂直位置
    pixelOffset : new Cesium.Cartesian2(0, 22)////文字中心位置
  }
});
//这个是镜头追踪，将镜头固定在标记上
 //viewer.zoomTo(citizensBankPark);
              //添加3d实体模型
var entity1 = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(114.07373, 33.62359, 0.0),
		name:'货车001',
    model : {
        uri : 'Apps/SampleData/models/CesiumGround/Cesium_Ground.gltf',
				     minimumPixelSize :30,
				   //  maximumScale :30
    }
});
              //添加3d实体模型
var entity2 = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(114.07423, 33.62359,0.0),
		name:'货车002',
    model : {
        uri : 'Apps/SampleData/models/CesiumGround/Cesium_Ground.gltf',
				     minimumPixelSize :30,
				  //   maximumScale :30
    }
});
//这个是镜头追踪，将镜头固定在小车上
//viewer.trackedEntity = entity;

var test = "我是后台数据"
//货车介绍定位追踪
entity1.description = '\
<img\
  width="50%"\
  style="float:left; margin: 0 1em 1em 0;"\
  src="//imgsrc.baidu.com/baike/abpic/item/d35a10f45f26d158dcc4740e.jpg"/>\
<p>\
  一大块果冻，想不想吃？\
</p>\
<p>\
 '+test+' \
</p>\
<p>\
  介绍: \
  <a style="color: WHITE"\
    target="_blank"\
    href="http://imgsrc.baidu.com/baike/abpic/item/d35a10f45f26d158dcc4740e.jpg">点击查看</a>\
</p>';


<!-- 经纬度实时显示 -->
var longitude_show=document.getElementById('longitude_show');
var latitude_show=document.getElementById('latitude_show');
var altitude_show=document.getElementById('altitude_show');
var canvas=viewer.scene.canvas;
//具体事件的实现
var ellipsoid=viewer.scene.globe.ellipsoid;
var handler = new Cesium.ScreenSpaceEventHandler(canvas);
handler.setInputAction(function(movement){
            //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
             var cartesian=viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
              if(cartesian){
                   //将笛卡尔三维坐标转为地图坐标（弧度）
                   var cartographic=viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
                   //将地图坐标（弧度）转为十进制的度数
                    var lat_String=Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
                    var log_String=Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
					var alti_String=(viewer.camera.positionCartographic.height/1000).toFixed(2);
					longitude_show.innerHTML=log_String;//经度
					latitude_show.innerHTML=lat_String;//纬度
					altitude_show.innerHTML=alti_String;//视角高度
               }
        },Cesium.ScreenSpaceEventType.MOUSE_MOVE);

//移动标记
		var czml = [
			{
    "id" : "document",
    "name" : "CZML Point - Time Dynamic",
    "version" : "1.0",
		 "clock": {
        "interval": "2019-10-04T10:00:00Z/2019-10-04T11:00:00Z",//时间线控制时间显示
        "currentTime": "2019-10-04T10:00:00Z",//初始时间显示
        "multiplier": 5    //初始播放速度
    }
},
{
    "id" : "1",
		"name":"一号飞船",
		"description" : "<p>预计到港时间：<br>2019/11/25/15：00</p>",
    "availability" :"2019-10-04T10:00:00Z/2019-10-04T11:00:00Z",//开始时间到结束时间标示一个对象的数据在什么时候是可用的
    "position" : {
        "epoch" : "2019-10-04T10:00:00Z",//开始时间  114.07573, 33.62309
        "cartographicDegrees" : [
             0,114.0763,33.6238,0,//1、AQI值
            50,114.0762,33.6235,0,
            100,114.0760,33.6232,0,
						120,114.0760,33.6232,0,
						3600,114.0760,33.6232,0,
        ]//位置与角度
    },
     "billboard" : {
        "image" : "images/cluster2.png",
				"scale" : 0.5, 
    },
},
{
    "id" : "2",
		"name":"二号飞船",
		"description" : "<p>预计到港时间：<br>2019/11/26/10：00</p>",
    "availability" :"2019-10-04T10:00:00Z/2019-10-04T11:00:00Z",//开始时间到结束时间标示一个对象的数据在什么时候是可用的
    "position" : {
        "epoch" : "2019-10-04T10:00:00Z",//开始时间  114.07573, 33.62309
        "cartographicDegrees" : [
              	0,114.0768,33.6238,0,//1、AQI值
              100,114.0762,33.6235,0,
              200,114.0760,33.6232,0,
              300,114.0758,33.6227,0,
							3600,114.0758,33.6227,0
        ]//位置与角度
    },
    "billboard" : {
    		"image" : "images/cluster3.png",
    		"scale" : 0.5, 
    },
}
];
//console.log(czml[1].position.cartographicDegrees);
      // 起始时间
      //  var start = Cesium.JulianDate.fromDate(new Date(2019,10,04));
        // 结束时间
      //  var stop = Cesium.JulianDate.addSeconds(start, 36000, new Cesium.JulianDate());
        // 设置始时钟始时间
      //  viewer.clock.startTime = start.clone();
        // 设置时钟当前时间
       // viewer.clock.currentTime = start.clone();
        // 设置始终停止时间
      //  viewer.clock.stopTime  = stop.clone();
        // 时间速率，数字越大时间过的越快
      //  viewer.clock.multiplier = 5;
        // 时间轴
       // viewer.timeline.zoomTo(start,stop);
        // 循环执行
       // viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
// var innerp = [];
// 		$.each(czml, function (n, value) {
// 			
// 		if(n==1){
// 			innerp=innerp+'<span style="">'+value.position.cartographicDegrees+'</span>'
// 			console.log(value.position.cartographicDegrees);
// 		}
// 		
// 		
// 		})
	//	$("#pro").html(innerp);
//console.log(innerp)





		</script>
	</body>
</html>
